<%@ include file="/WEB-INF/views/include.jsp"%>
<%@ page session="false" %>
<%@ taglib uri="http://jsptags.com/tags/navigation/pager" prefix="pg" %>
<html>
<head>
	<link rel="stylesheet" type="text/css" href="<c:url value="/css/ui/jquery.ui.datepicker.css"/>" />
	<link rel="stylesheet" type="text/css" href="<c:url value="/css/ui/jquery.ui.theme.css"/>" />
	<link rel="stylesheet" type="text/css" href="<c:url value="/css/ui/jquery.ui.core.css"/>" />
	<title>Search User</title>
</head>
<body>
<div id="wrapper">
    <div id="content">
        <div id="box">
            <form:form id="user" method="post" action="search-user" commandName="userSearch">
              <fieldset id="personal">
                <legend>PERSONAL INFORMATION</legend>
                <div class="clearfix">	
	                <form:label path="username">User Name :</form:label>
	                <div class="input">
	        			<form:input path="username"></form:input><form:errors path="username" cssClass="errors"/>
	        		</div>
	        	</div>
        		<div class="clearfix">	
	             	<form:label path="email">Email :</form:label>
	             	<div class="input">
	       				<form:input path="email"></form:input><form:errors path="email" cssClass="errors"/>
	       			</div>
	       		</div>
                <div class="clearfix">	
                	<label id="optionsCheckboxes">Role :</label>
                	<div class="input">
                	  <ul class="inputs-list">
		                <li>
		                  <label>
		                    <form:checkbox path="roleFO"></form:checkbox>
		                    <span>FO</span>
		                  </label>
		                </li>
		                <li>
		                  <label>
		                    <form:checkbox path="roleBO"></form:checkbox>
		                    <span>BO</span>
		                  </label>
		                </li>
		              </ul>
		            </div>
                 </div>
              </fieldset>
              <fieldset id="register">
                <legend>REGISTER DATE</legend>
                <div class="clearfix">	
	                <form:label path="createFrom">Register from :</form:label>
	                <div class="input">
	        			<form:input path="createFrom" id="datepickerfrom"></form:input>
	        		</div>	
        		</div>
        		<div class="clearfix">	
	             	<form:label path="createTo">Register to :</form:label>
	             	<div class="input">
	       				<form:input path="createTo" id="datepickerto"></form:input>
	       			</div>	
	       		</div>
              </fieldset>
              <fieldset id="address">
                <legend>Address</legend>
                <div class="clearfix">	
	                <form:label path="street">Street address :</form:label>
	                <div class="input">
	        			<form:input path="street"></form:input><form:errors path="street" cssClass="errors"/>
	        		</div>	
	        	</div>	
                <div class="clearfix">	
	                <form:label path="city">City :</form:label>
	                <div class="input">
	        			<form:input path="city"></form:input><form:errors path="city" cssClass="errors"/>
	        		</div>
	        	</div>	
                <div class="clearfix">	
	                <form:label path="country">Country :</form:label>
	                <div class="input">
	        			<form:input path="country"></form:input><form:errors path="country" cssClass="errors"/>
	        		</div>
                </div>
                <div class="clearfix">	
	                <form:label path="state">State/Province :</form:label>
	                <div class="input">
	        			<form:input path="state"></form:input><form:errors path="state" cssClass="errors"/>
	        		</div>
	        	</div>	
                <div class="clearfix">	
	                <form:label path="telephone">Telephone :</form:label>
	                <div class="input">
	        			<form:input path="telephone"></form:input><form:errors path="telephone" cssClass="errors"/>
	        		</div>
	        	</div>	
              </fieldset>
             <div align="center" style="padding: 14px 19px;" class="well">
              <input id="button1" type="submit" value="Submit" class="btn primary" /> 
              <input id="button2" type="reset" class="btn success" />
              </div>
           	</form:form>
        </div>
        <br />
        <div id="box">
					<pg:pager
					    items="${size}"
					    url="search-user"
					    index="center"
					    maxPageItems="${pageItems}"
					    maxIndexPages="10"
					    isOffset="<%= true %>"
					    export="offset,currentPageNumber=pageNumber"
					    scope="request">
					<%-- keep track of preference --%>
					  <pg:param name="style"/>
					  <pg:param name="position"/>
					  <pg:param name="index"/>
					  <pg:param name="maxPageItems"/>
					  <pg:param name="maxIndexPages"/>
					  <%-- save pager offset during form changes --%>
					  <input type="hidden" name="pager.offset" value="<%= offset %>">
				 <c:if test="${size > 0}">
                	<h3>Users</h3>
                	<table width="100%">
						<thead>
							<tr>
                            	<th width="40px"><a href="#"><fmt:message key="user.form.id"/><img src="/groupon/images/icons/arrow_down_mini.gif" width="16" height="16" align="absmiddle" /></a></th>
                            	<th width="80px"><a href="#"><fmt:message key="user.form.fullname"/></a></th>
                                <th width="80px"><a href="#"><fmt:message key="user.form.username"/></a></th>
                                <th width="200px"><a href="#"><fmt:message key="user.form.email"/></a></th>
                                <th width="40px"><a href="#"><fmt:message key="user.form.role"/></a></th>
                                <th width="90px"><a href="#"><fmt:message key="user.form.Registered"/></a></th>
                                <th width="60px"><a href="#"><fmt:message key="user.form.Action"/></a></th>
                            </tr>
						</thead>
						<tbody>
							<c:forEach items="${users}" var="user">
							    <tr>
							        <c:url var="editUrl" value="/bo/users/edit-user">
							            <c:param name="id" value="${user.id}" />
							        </c:url>
							        <c:url var="viewUrl" value="/bo/users/view-user">
							            <c:param name="id" value="${user.id}" />
							        </c:url>
							        <sec:authorize access="hasRole('ROLE_ADMIN')">
							            <c:url var="deleteUrl" value="/bo/users/delete-user"/>
							            <form id="deleteForm${user.id}" action="${deleteUrl}" method="POST">
							                <input id="id" name="id" type="hidden" value="${user.id}"/>
							            </form>
							            <c:url var="activeUrl" value="/bo/users/active-user">
							            	<c:param name="id" value="${user.id}" />
							            </c:url>
							            <c:url var="deactiveUrl" value="/bo/users/deactive-user">
							            	<c:param name="id" value="${user.id}" />
							            </c:url>
							        </sec:authorize>
							
							    	<td class="a-center">${user.id}</td>
							        <td>${user.firstName} ${user.lastName}</td> 
							        <td>${user.username}</td>
							        <td>${user.email}</td>
							        <td>${user.role}</td>
							        <td><fmt:formatDate value="${user.createdDate}" pattern="yyyy-MM-dd hh:mm:ss"/>
									</td>
							    	<td>
							            <a href="#" onclick="viewUser('${viewUrl}');"><img src="/groupon/images/icons/user.png" title="View User" width="16" height="16" /></a>
							            <sec:authorize access="hasRole('ROLE_ADMIN')">
							            	<a href='#' onclick="editUser('${editUrl}');"><img src="/groupon/images/icons/user_edit.png" title="Edit User" width="16" height="16" /></a>
						               		<a href="javascript:jQuery('#deleteForm${user.id}').submit();"><img src="/groupon/images/icons/user_delete.png" title="Delete User" width="16" height="16" /></a>
											<div id="active${user.id}">
												<a href="#"	onclick="setInfoForDeActiveUser('${deactiveUrl}','${user.username}','${user.id}');"><img src="/groupon/images/icons/de-active.png" title="De-Active User" width="16" height="16" /></a>
											</div>
											<div id="deactive${user.id}">
												<a href="#" onclick="setInfoForActiveUser('${activeUrl}','${user.username}','${user.id}');"><img src="/groupon/images/icons/active.png" title="Active User" width="16" height="16" /></a>
											</div>
											<c:choose>
										      <c:when test="${user.active}">
							            	       <script language="Javascript">
							            	      		 jQuery('#deactive${user.id}').hide();			
							            	       </script>
										      </c:when>
										      <c:otherwise>
											      <script language="Javascript">
											     		 jQuery('#active${user.id}').hide();		
							            	       </script>
										      </c:otherwise>
										    </c:choose>
							            </sec:authorize>
							        </td>
							    </tr>
							</c:forEach>
							
						</tbody>
					</table>
                    <div id="pager">
                    		<jsp:include page="/WEB-INF/views/paging.jsp" flush="true"/>
                    </div>
                </c:if> 
                    </pg:pager>
                </div>
    </div>
</div>
	<jsp:include page="/WEB-INF/views/bo/users/view-user.jsp" flush="true"/>
	<jsp:include page="/WEB-INF/views/bo/users/edit-user.jsp" flush="true"/>
	<jsp:include page="/WEB-INF/views/bo/users/active-user.jsp" flush="true"/>
<script language="Javascript">
        function viewUser(url) {
    		jQuery.ajax({
    			  url: url,
    			  context: document.body,
    			  success: function(user){
    				  jQuery("#modal-view-user").modal({
    					  backdrop: 'static',
    					  keyboard: true
    				  })
    			   	  jQuery('#modal-view-user .modal-body').html(viewUserInLightBox(user));
    			  }
    			});
    	}
    	function viewUserInLightBox(user){
        	data = '<p><fmt:message key="user.form.fullname"/>:  ' + user.firstName + ' ' + user.lastName +'</p>' +  '<p><fmt:message key="user.form.username"/>:  ' + user.username + '</p>' +
        			'<p><fmt:message key="user.form.email"/>:  ' + user.email + '</p>' +
        			'<fmt:message key="user.form.role"/>:  ' + user.role + '</p>' + 
        			'<fmt:message key="user.form.Registered"/>:  ' + new Date(user.createdDate).toDateString() + '</p>' +
        			'<fmt:message key="user.form.Active"/>:  ' + user.active + '</p>' +
        			'<fmt:message key="user.form.Birthday"/>:  ' + user.birthday + '</p>';
        		if(user.street != null && user.street != ""){
            		data +=	'<fmt:message key="user.form.address"/>:  ' + user.street + '</p>'; 
            	}
        		if(user.city != null && user.city != ""){
            		data +=	'<fmt:message key="user.form.city"/>:  ' + user.city + '</p>'; 
            	}
        		if(user.country != null && user.country != ""){
            		data +=	'<fmt:message key="user.form.country"/>:  ' + user.country + '</p>'; 
            	}
        		if(user.state != null && user.state != ""){
            		data +=	'<fmt:message key="user.form.state"/>:  ' + user.state + '</p>'; 
            	}
        		if(user.telephone != null && user.telephone != ""){
            		data +='<fmt:message key="user.form.telephone"/>:  ' + user.telephone + '</p>'; 
            	}
			return data	
        }

    	function editUser(url) {
    		jQuery.ajax({
    			  url: url,
    			  context: document.body,
    			  success: function(user){
    				  jQuery("#modal-edit-user").modal({
    					  show:true,
    					  backdrop: 'static',
    					  keyboard: true
    					  
    				  })
    				  editUserInLightBox(user);
    			  }
    			});
    	}

    	function editUserInLightBox(user){
    		  //jQuery('.modal-body').html(user);
    		  jQuery('#modal-edit-user input#id').val(user.id);
    		  jQuery('#modal-edit-user input#username').val(user.username);
    		  jQuery('#modal-edit-user input#firstName').val(user.firstName);
    		  jQuery('#modal-edit-user input#lastName').val(user.lastName);
    		  jQuery('#modal-edit-user input#email').val(user.email);
    		  jQuery('#modal-edit-user input#street').val(user.street);
    		  jQuery('#modal-edit-user input#city').val(user.city);
    		  jQuery('#modal-edit-user input#country').val(user.country);
    		  jQuery('#modal-edit-user input#state').val(user.state);
    		  jQuery('#modal-edit-user input#telephone').val(user.telephone);
        }

    	jQuery(document).ready(function() {
    		jQuery("#datepickerfrom").datepicker({
    				changeMonth: true,
    				changeYear: true
    			});
    		jQuery("#datepickerto").datepicker({
				changeMonth: true,
				changeYear: true
			});
   		  });
</script>
	
</body>
</html>